<script setup lang="ts">
import { ref } from 'vue';

// 假设一些核算数据
const vepData = ref([
  { id: 1, name: '项目A', amount: 1000, date: '2023-10-01' },
  { id: 2, name: '项目B', amount: 1500, date: '2023-10-02' },
  { id: 3, name: '项目C', amount: 2000, date: '2023-10-03' }
]);
</script>

<template>
  <div class="vep-container">
    <h1>VEP 核算页面</h1>
    <table class="vep-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>金额</th>
          <th>日期</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in vepData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.amount }}</td>
          <td>{{ item.date }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.vep-container {
  padding: 20px;

}

h1 {
  text-align: center;
  color: #ffffff;
}

.vep-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.vep-table th, .vep-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.vep-table th {
  background-color: #4a4a4c;
}
</style>
